<template>
  <div>
    <input type="button" :value="dateValue" @click.stop="dateBoxEvent" :class="className" :style="styleName" />
    <DateCom
      :type="type"
      :min="min"
      :max="max"
      :weekInfo="weekInfo"
      v-model:visible="visible"
      v-model:value="dateValue"
    />
  </div>
</template>
<script>
import DateCom from './DateCom.vue';
export default {
  name: 'my-date',
  components: {
    DateCom
  },
  data() {
    return {
      visible: false
    };
  },
  emits: ['update:value'],
  props: {
    type: String,
    min: String,
    max: String,
    weekInfo: Object,
    value: String,
    className: String,
    styleName: String
  },
  computed: {
    dateValue: {
      get() {
        return this.value;
      },
      set(value) {
        console.log(`set date ${value}`);
        this.$emit('update:value', value);
      }
    }
  },
  methods: {
    dateBoxEvent() {
      this.visible = !this.visible;
    },
    setsetVisibleFlase() {
      this.visible = false;
    }
  },
  mounted() {
    document.querySelector('body').addEventListener('click', this.setVisibleFlase);
  },
  unmounted() {
    document.querySelector('body').removeEventListener('click', this.setVisibleFlase);
  }
};
</script>
<style lang="scss" scoped>
.box {
  min-height: 190px;
  width: 248px;
  border-radius: 4px;
  box-shadow: 0px 0px 5px 5px #eeeeee;
  padding: 12px;
  position: absolute;
  margin-top: 4px;
  display: none;
  background: #fff;
}
.input-box {
  height: 30px;
  width: 100%;
  background: url(./assets/calendar.png) no-repeat;
  background-size: 20px 20px;
  background-position-y: 3px;
  padding-left: 25px;
  padding-right: 25px;
  border-radius: 4px;
}
.next-btn {
  height: 20px;
  width: 20px;
  cursor: pointer;
}
.next-btn:hover {
  background: #eeeeee;
}
</style>
